<template>
  <div class="help-center-container">
    <!-- 添加导航组件 -->
    <help-navigation />
    
    <n-card class="help-center-card">
      <template #header>
        <div class="card-header">
          <h1>帮助中心</h1>
          <div class="search-box">
            <n-input
              v-model:value="searchQuery"
              placeholder="搜索帮助内容..."
              clearable
              round
              @keydown.enter="searchHelp"
            >
              <template #prefix>
                <n-icon><SearchOutline /></n-icon>
              </template>
              <template #suffix>
                <n-button quaternary circle @click="searchHelp">
                  <n-icon><ArrowForwardOutline /></n-icon>
                </n-button>
              </template>
            </n-input>
          </div>
        </div>
      </template>

      <div class="help-sections">
        <!-- 快速入门 -->
        <div class="help-section">
          <div class="section-header">
            <h2>快速入门</h2>
            <n-button text @click="navigateTo('/tutorials/quickstart')">
              查看全部
              <template #icon><n-icon><ArrowForwardOutline /></n-icon></template>
            </n-button>
          </div>
          
          <n-grid :cols="isMobile ? 1 : 3" :x-gap="16" :y-gap="16">
            <n-grid-item v-for="guide in quickStartGuides" :key="guide.id">
              <div class="guide-card" @click="navigateTo(guide.url)">
                <div class="guide-icon">
                  <n-icon size="28" :component="guide.icon" />
                </div>
                <div class="guide-content">
                  <div class="guide-title">{{ guide.title }}</div>
                  <div class="guide-desc">{{ guide.description }}</div>
                </div>
              </div>
            </n-grid-item>
          </n-grid>
        </div>
        
        <!-- 视频教程 -->
        <div class="help-section">
          <div class="section-header">
            <h2>视频教程</h2>
            <n-button text @click="navigateTo('/tutorials')">
              查看全部
              <template #icon><n-icon><ArrowForwardOutline /></n-icon></template>
            </n-button>
          </div>
          
          <n-grid :cols="isMobile ? 1 : 3" :x-gap="16" :y-gap="16">
            <n-grid-item v-for="tutorial in featuredTutorials" :key="tutorial.id">
              <div class="tutorial-card" @click="navigateTo(tutorial.url)">
                <div class="tutorial-thumbnail">
                  <img :src="tutorial.thumbnail" :alt="tutorial.title">
                  <div class="tutorial-duration">{{ tutorial.duration }}</div>
                </div>
                <div class="tutorial-info">
                  <div class="tutorial-title">{{ tutorial.title }}</div>
                  <div class="tutorial-meta">
                    <span class="tutorial-level" :class="tutorial.level">{{ getLevelText(tutorial.level) }}</span>
                    <span class="tutorial-views">{{ tutorial.views }}次观看</span>
                  </div>
                </div>
              </div>
            </n-grid-item>
          </n-grid>
        </div>
        
        <!-- 常见问题 -->
        <div class="help-section">
          <div class="section-header">
            <h2>常见问题</h2>
            <n-button text @click="navigateTo('/faq')">
              查看全部
              <template #icon><n-icon><ArrowForwardOutline /></n-icon></template>
            </n-button>
          </div>
          
          <n-grid :cols="isMobile ? 1 : 2" :x-gap="16" :y-gap="16">
            <n-grid-item v-for="faq in popularFaqs" :key="faq.id">
              <div class="faq-item" @click="navigateTo(`/faq?id=${faq.id}`)">
                <div class="faq-question">
                  <n-icon class="question-icon"><HelpCircleOutline /></n-icon>
                  <span>{{ faq.question }}</span>
                </div>
                <div class="faq-preview">{{ faq.preview }}</div>
              </div>
            </n-grid-item>
          </n-grid>
        </div>
        
        <!-- 帮助选项 -->
        <div class="help-options">
          <n-grid :cols="isMobile ? 1 : 3" :x-gap="16" :y-gap="16">
            <n-grid-item>
              <div class="help-option" @click="navigateTo('/tutorials')">
                <n-icon size="36"><BookOutline /></n-icon>
                <h3>教程中心</h3>
                <p>浏览详细的文字和视频教程，学习软件的各项功能</p>
              </div>
            </n-grid-item>
            
            <n-grid-item>
              <div class="help-option" @click="navigateTo('/faq')">
                <n-icon size="36"><HelpCircleOutline /></n-icon>
                <h3>常见问题</h3>
                <p>查找常见问题的解答，快速解决使用中遇到的困惑</p>
              </div>
            </n-grid-item>
            
            <n-grid-item>
              <div class="help-option" @click="navigateTo('/feedback')">
                <n-icon size="36"><ChatboxOutline /></n-icon>
                <h3>联系支持</h3>
                <p>提交问题反馈，获取技术支持或提供改进建议</p>
              </div>
            </n-grid-item>
          </n-grid>
        </div>
      </div>

      <template #footer>
        <div class="help-footer">
          <n-space justify="center">
            <n-button @click="navigateTo('/community')" quaternary>
              <template #icon><n-icon><PeopleOutline /></n-icon></template>
              社区讨论
            </n-button>
            <n-button @click="navigateTo('/feedback')" quaternary>
              <template #icon><n-icon><ChatboxEllipsesOutline /></n-icon></template>
              问题反馈
            </n-button>
            <n-button @click="openExternalLink('https://github.com/your-repo/shadow-flash/issues')" quaternary>
              <template #icon><n-icon><LogoGithub /></n-icon></template>
              GitHub Issues
            </n-button>
          </n-space>
        </div>
      </template>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { useWindowSize } from '@vueuse/core'
import {
  NCard,
  NInput,
  NButton,
  NIcon,
  NGrid,
  NGridItem,
  NSpace
} from 'naive-ui'
import {
  SearchOutline,
  ArrowForwardOutline,
  BookOutline,
  HelpCircleOutline,
  ChatboxOutline,
  PeopleOutline,
  ChatboxEllipsesOutline,
  LogoGithub,
  FilmOutline,
  PersonOutline,
  CubeOutline,
  ImagesOutline,
  ColorPaletteOutline,
  CloudUploadOutline
} from '@vicons/ionicons5'
import HelpNavigation from '../../components/help/HelpNavigation.vue'

const router = useRouter()
const message = useMessage()
const { width } = useWindowSize()
const searchQuery = ref('')

// 响应式布局
const isMobile = computed(() => width.value < 768)

// 快速入门指南
const quickStartGuides = [
  {
    id: 'guide-1',
    title: '新手入门',
    description: '了解基本界面和操作，快速上手创作',
    icon: PersonOutline,
    url: '/tutorials/beginner'
  },
  {
    id: 'guide-2',
    title: '角色创建',
    description: '学习如何设计和制作自定义角色',
    icon: CubeOutline,
    url: '/tutorials/character'
  },
  {
    id: 'guide-3',
    title: '场景编辑',
    description: '掌握场景搭建和环境效果设置',
    icon: ImagesOutline,
    url: '/tutorials/scene'
  }
]

// 精选视频教程
const featuredTutorials = [
  {
    id: 'tutorial-1',
    title: '角色动画制作全流程',
    thumbnail: 'https://picsum.photos/id/1/300/169',
    duration: '12:34',
    level: 'beginner',
    views: 2345,
    url: '/tutorials/character-animation'
  },
  {
    id: 'tutorial-2',
    title: '高级场景特效技巧',
    thumbnail: 'https://picsum.photos/id/2/300/169',
    duration: '08:21',
    level: 'intermediate',
    views: 1892,
    url: '/tutorials/scene-effects'
  },
  {
    id: 'tutorial-3',
    title: '导出最佳实践与技巧',
    thumbnail: 'https://picsum.photos/id/3/300/169',
    duration: '05:46',
    level: 'beginner',
    views: 3241,
    url: '/tutorials/export-tips'
  }
]

// 热门问题
const popularFaqs = [
  {
    id: 'faq-1',
    question: '如何导出高质量视频？',
    preview: '了解如何设置正确的导出参数，获得最佳质量的视频输出...'
  },
  {
    id: 'faq-2',
    question: '如何制作角色走路动画？',
    preview: '学习创建自然流畅的角色行走循环动画的基本步骤...'
  },
  {
    id: 'faq-3',
    question: '如何同步音频和动画？',
    preview: '掌握在时间轴上精确同步音频和角色动作的技巧...'
  },
  {
    id: 'faq-4',
    question: '如何使用AI生成功能？',
    preview: '了解如何使用内置的AI工具快速生成场景和动画效果...'
  }
]

// 获取难度等级文本
const getLevelText = (level: string) => {
  const levelMap = {
    'beginner': '初级',
    'intermediate': '中级',
    'advanced': '高级'
  }
  return levelMap[level] || '初级'
}

// 导航到指定路径
const navigateTo = (path: string) => {
  router.push(path)
}

// 搜索帮助内容
const searchHelp = () => {
  if (!searchQuery.value.trim()) {
    message.info('请输入搜索内容')
    return
  }
  
  router.push({
    path: '/tutorials',
    query: { search: searchQuery.value }
  })
}

// 打开外部链接
const openExternalLink = (url: string) => {
  // 实际项目中，这里会使用Electron的shell.openExternal API
  window.open(url, '_blank')
}

onMounted(() => {
  // 可以在这里加载最新的教程和FAQ数据
})
</script>

<style lang="scss" scoped>
.help-center-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  
  .help-center-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      
      h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
      }
      
      .search-box {
        width: 300px;
      }
    }
    
    .help-sections {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    
    .help-section {
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
    
    .guide-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border-radius: 8px;
      background-color: var(--card-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }
      
      .guide-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: var(--primary-color-hover);
        color: var(--primary-color);
      }
      
      .guide-content {
        flex: 1;
        
        .guide-title {
          font-weight: 500;
          margin-bottom: 4px;
        }
        
        .guide-desc {
          font-size: 13px;
          color: var(--text-color-2);
        }
      }
    }
    
    .tutorial-card {
      border-radius: 8px;
      overflow: hidden;
      background-color: var(--card-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }
      
      .tutorial-thumbnail {
        position: relative;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .tutorial-duration {
          position: absolute;
          bottom: 8px;
          right: 8px;
          padding: 2px 6px;
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          border-radius: 4px;
          font-size: 12px;
        }
      }
      
      .tutorial-info {
        padding: 12px;
        
        .tutorial-title {
          font-weight: 500;
          margin-bottom: 8px;
          line-height: 1.3;
        }
        
        .tutorial-meta {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: var(--text-color-3);
          
          .tutorial-level {
            padding: 2px 6px;
            border-radius: 4px;
            
            &.beginner {
              background-color: rgba(24, 160, 88, 0.1);
              color: #18a058;
            }
            
            &.intermediate {
              background-color: rgba(240, 160, 32, 0.1);
              color: #f0a020;
            }
            
            &.advanced {
              background-color: rgba(208, 48, 80, 0.1);
              color: #d03050;
            }
          }
        }
      }
    }
    
    .faq-item {
      padding: 16px;
      border-radius: 8px;
      background-color: var(--card-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }
      
      .faq-question {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-weight: 500;
        
        .question-icon {
          color: var(--primary-color);
        }
      }
      
      .faq-preview {
        font-size: 13px;
        color: var(--text-color-2);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    
    .help-options {
      margin-top: 16px;
      
      .help-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        border-radius: 8px;
        background-color: var(--card-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
        
        h3 {
          margin: 16px 0 8px;
          font-weight: 500;
        }
        
        p {
          margin: 0;
          font-size: 13px;
          color: var(--text-color-2);
        }
        
        .n-icon {
          color: var(--primary-color);
        }
      }
    }
    
    .help-footer {
      margin-top: 16px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .help-center-container {
    padding: 10px;
    
    .help-center-card {
      .card-header {
        flex-direction: column;
        align-items: stretch;
        
        .search-box {
          width: 100%;
        }
      }
    }
  }
}
</style> 